<template>
  <div class="container">
    <a-row :gutter="gutter" v-show="$_has('personal_work')">
      <a-col :span="16" class="Acol">
        <div class="CardAvatar">
          <a-avatar :size="size" icon="user" :src="AvatarImage"/>
        </div>
        <div class="CardView">
          <div class="CardTitle">早安! {{LeftBrief.theTeacher}} 老师,祝您开心每一天!</div>
          <div class="lastLogin">最近登陆时间:{{LeftBrief.lastTime}}</div>
        </div>
        <div class="BottomView">
          <div class="loginDays">连续登录{{LeftBrief.continuousDay}}天</div>
          <div class="NumberOfTime">总登录次数{{LeftBrief.numberOfTime}}次</div>
        </div>
        <div class="clear"></div>
      </a-col>
      <a-col :span="8">
        <a-skeleton :loading="loading" active>
          <div class="WeatherTop">
            <img class="WeatherImage" src="~/static/Weather/DarkNight.png" alt>
            <div style="position:absolute;top:35%;left:25%;font-size:16px">{{Weather.city}}</div>
            <div style="position:absolute;top:35%;right:29%;font-size:16px">{{Weather.temperature}}°</div>
          </div>
          <!-- <div class="border">
            <div class="RightTop">
              <div>{{Weather.city}}</div>
              <div>天气: {{Weather.weather}}</div>
              <div>实时气温:{{Weather.temperature}} 单位(摄氏度)</div>
            </div>
            <div>
              <div>风向:{{Weather.winddirection}}</div>
              <div>风力级别:{{Weather.windpower}}单位(级)</div>
              <div>数据发布时间:{{Weather.reporttime}}</div>
            </div>
          </div>-->
        </a-skeleton>
      </a-col>
    </a-row>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
import axios from "axios";
import Setting from "~/utils/setting.ts";
import { getWeather } from "~/models/Weather";

@Component
export default class InProfile extends Vue {
  @Prop({ type: Number, default: 20 }) gutter!: Number;
  @Prop({ type: Number, default: 80 }) size!: Number;
  @Prop({ type: Object, required: true }) LeftBrief!: Object;
  @Prop({
    type: String
  })
  AvatarImage!: String;
  adcode: string = ""; //城市编码
  Weather: object = {}; //天气情况
  loading: boolean = true;

  created() {
    this.getItem();
  }
  getItem() {
    this.getWeather();
  }
  //根据请求ip地址获取所在地区
  async getWeather() {
    const params = {
      key: Setting.key
    };
    await axios({
      url: "https://restapi.amap.com/v3/ip",
      params
    }).then((res: getWeather) => {
      if (res && res.data.status === "1") {
        this.adcode = res.data.adcode;
      }
    });

    const paramsW = {
      key: Setting.key,
      city: this.adcode,
      extensions: "base" //只显示当前的天气情况 base/all
    };
    await axios({
      url: "https://restapi.amap.com/v3/weather/weatherInfo",
      params: paramsW
    }).then((res: getWeather) => {
      if (res && res.data.status === "1") {
        this.Weather = res.data.lives[0];
        this.loading = false;
      }
    });
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 20px 30px 20px 30px;
  .Acol {
    background-color: #00796b;
    padding: 28px 0px;
    border-radius: 10px;
  }
  .border {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    padding: 18px;
  }
  .CardTitle {
    font-size: 24px;
    color: white;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .lastLogin {
    color: #ccc;
  }
  .CardAvatar {
    float: left;
  }
  .CardView {
    float: left;
    margin-left: 5px;
  }
  .clear {
    clear: both;
  }
  .BottomView {
    float: right;
    margin-top: 12px;
    margin-right: 5px;
  }
  .loginDays {
    font-size: 22px;
    color: white;
  }
  .NumberOfTime {
    color: #ccc;
    margin-top: 10px;
    margin-left: 10px;
  }
}
.RightTop {
}
.WeatherTop {
  height: 136px;
  position: relative;
  .WeatherCity {
    position: absolute;
    top: 35%;
    left: 25%;
    font-size: 16px;
  }
  .WeatherTemperature {
    position: absolute;
    top: 35%;
    right: 29%;
    font-size: 16px;
  }
}
.WeatherImage {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
</style>
